<template>
	<div class="active-list">
		<Table :where="where" :url="url" ref="Table" :col="5">
			<div slot="hd-btn">
				<el-button type="primary" @click="add">添加活动</el-button>
			</div>
			<el-table-column prop="id" label="id" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="活动名称" align='center'>
			</el-table-column>
			<el-table-column prop="department" label="部门" align='center'>
			</el-table-column>
			<el-table-column label="应用场景" align='center'>
				<template slot-scope="scope">
					<span v-text="{1:'app外',2:'app内'}[scope.row.schedule]"></span>
				</template>
			</el-table-column>
			<el-table-column prop="event_key" label="活动key" align='center'>
			</el-table-column>
			<el-table-column label="是否可使用卡卷" align='center'>
				<template slot-scope="scope">
					<span v-text="['不可使用','可使用'][scope.row.is_use_coupon]"></span>
				</template>
			</el-table-column>
			<el-table-column prop="coupon_ids" label="卷ids(逗号分割)" align='center'>
			</el-table-column>
			<el-table-column prop="award_ids" label="自建奖品ids(逗号分割)" align='center'>
			</el-table-column>
			<el-table-column prop="experience_red_packet_ids" label="体验金红包id(逗号分割)" align='center'>
			</el-table-column>
			<el-table-column prop="cash_red_packet_ids" label="现金红包id(逗号分割)" align='center'>
			</el-table-column>
			<el-table-column label="开始时间" width="200" align='center'>
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.start_time }}</span>
				</template>
			</el-table-column>
			<el-table-column label="结束时间" align='center' width="200">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.end_time }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="c_time" label="创建时间" align='center' width="180">
			</el-table-column>
			<el-table-column prop="u_time" label="更新时间" align='center' width="180">
			</el-table-column>
			<el-table-column prop="admin_id" label="最近一次更改人" align='center'>
			</el-table-column>
			<el-table-column label="操作" fixed="right" align='center' width="250">
				<template slot-scope="scope">
					<el-button size="mini" @click="edit(scope.row)" icon="el-icon-edit"></el-button>
					<el-button size="mini" type="success" @click="addRules(scope.row)" icon="el-icon-goods"></el-button>
					<el-button size="mini" type="primary" icon="el-icon-view" @click="viewLinks(scope.row)"></el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button>
				</template>
			</el-table-column>
		</Table>
		<!-- <Add-rules></Add-rules> -->
		<Dialog @close="close" @confirm="confirm" :dialogISshow="dialogISshow" v-if="dialogISshow" :options='options' title="新建奖品" :col="16" width="80%" top="10px">
			<el-col :span="24">
				<el-col :span="24" class="channels">

					<el-col :span="24" style="display:flex; justify-content:flex-start;" v-for="(item,index) in channels" :key="item+index">
						<el-col :span="8">
							<el-form-item :label="''">
								<el-input v-model="item.name" placeholder="请输入渠道名称" :disabled="!!item.id"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<!-- <el-form-item :label="''" style="margin-right:20px; min-width=100px;"> -->
							<el-input v-model="item.commodity_name" placeholder="选择奖品" readonly @focus="innerVisible=true"></el-input>
							<!-- </el-form-item> -->
						</el-col>
						<el-col :span="8">
							<el-form-item>
								<el-button @click="removeChannel(index)" :disabled="!!item.id">取消</el-button>
							</el-form-item>
						</el-col>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="''">
							<el-button @click="addChannel" class="addChannels">添加渠道</el-button>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-button @click="innerVisible=true">绑定奖品</el-button>
				</el-col>
				<Check-prize-list :prizeData="prizeData"></Check-prize-list>
			</el-col>
			<el-dialog width="30%" title="奖品列表" :visible.sync="innerVisible" :fullscreen="true" append-to-body :center="true">

				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<!-- <el-tab-pane label="平台奖品" name="1">
						<Platform :select="true" @selectChange="selectChange" :selectData="selectData.platform"></Platform>
					</el-tab-pane> -->
					<!-- <el-tab-pane label="自建奖品" name="2"> -->
						<Self-built :select="true" @selectChange="selectChange" :selectData="selectData.self"></Self-built>
					<!-- </el-tab-pane> -->
				</el-tabs>
				<span slot="footer" class="dialog-footer">
					<!-- <el-button @click="innerVisible = false">取 消</el-button> -->
					<el-button type="primary" @click="confirmCheck">关闭</el-button>
				</span>
			</el-dialog>
		</Dialog>
		<!-- <components :is="AddRules"></components> -->
		<AddRules v-if="addRulIsShow.state" :prizeData="prizeData" :rules="rules" :addRulIsShow="addRulIsShow" @refresh="_refresh" :activeId="activeId"></AddRules>
		<component :is="ActiveLink" :viewLinksIsShow="viewLinksIsShow" :activeId="activeId"></component>
	</div>
</template>
<script>
import { where, activeOpt } from './form';
import ActiveDialog from './components/active-dialog';
// import Platform from '../../prize-management/platform';
import SelfBuilt from '../goods/goods-list';
import AddRules from './components/add-rules';
import CheckPrizeList from './components/check-prize-list';
import ActiveLink from './components/active-link';

export default {
	data() {
		return {
			url: '/admin/zeroyuanBuy/getActiveList',
			where,
			dialogISshow: false,
			baseOptions: JSON.parse(JSON.stringify(activeOpt)),
			options: activeOpt,
			submitIng: false,
			innerVisible: false,
			addRulIsShow: {
				// 绑定规则模态框
				state: false,
			},
			viewLinksIsShow: {
				state: false,
			},
			activeId: '',
			operationType: '',
			prizeData: [],
			activeName: '1',
			basePrizeData: [],
			selectData: {
				platform: {},
				self: {},
			}, //服务器获取的选中数据
			// AddRules:AddRules,
			rules: [],
			channels: [],
			ActiveLink: null,
			// addules
			// platformData:[],
			// selfBuiltData:[]
			// prizeData:
		};
	},
	components: {
		// Platform,
		SelfBuilt,
		AddRules,
		CheckPrizeList,
	},
	methods: {
		confirm(formData) {
			let type = this.operationType;
			formData.goods_restrictions = JSON.stringify(this.selectData);
			formData.start_time = formData.times[0];
			formData.end_time = formData.times[1];
			let result = {};
			if (!type) {
				result = this.$http('/admin/active/addActive', formData);
			} else if ((type = 'edit')) {
				// formData.prizeId = this.prizeId;
				formData.activeId = this.activeId;
				result = this.$http('/admin/active/editActive', formData);
			}
			result
				.then(res => {
					log.ok(res.msg);
					this.dialogISshow = false;

					this._refresh();
					// this.$refs.Table._search();
				})
				.catch(err => {});
		},
		add() {
			this.dialogISshow = true;
			// this.$router.push('/active/createActive');
		},
		close() {
			// this.options = activeOpt;
			this.clearn();
			this.dialogISshow = false;
		},
		edit(data) {
			//
			this.activeId = data.id;
			this.$http('/admin/zeroyuanBuy/getChannels', {
				activeId: data.id,
			}).then(res => {
				this.dialogISshow = true;
				this.operationType = 'edit';
				let temp = res.data;
				temp.forEach(item => {
					item.value = [item.start_time, item.end_time];
					item.start_time = true;
					item.end_time = false;
					item.defaultTime = ['00:00:00', '23:59:59'];
				});
				this.channels = temp;
				// this.selectData = this.prizeData = this.parse(data.goods_restrictions, []);
				this.selectData = this.parse(data.goods_restrictions, {
					platform: {},
					self: {},
				});

				this.prizeData = this._getPrizeData();
				// this.options.start_time.disabled = true;
				this.disabled(['start_time', 'name', 'department', 'type', 'activity_abroad_url', 'schedule']);
			});
			// data.goods_restrictions = JSON.parse(data.goods_restrictions);

			this.fill(data);
		},
		disabled(ary = []) {
			let options = this.options;
			ary.forEach(key => {
				if (options.hasOwnProperty(key)) {
					options[key].disabled = true;
				}
			});
		},
		fill(data) {
			let options = this.options;
			// this.prizeId = data.id;
			for (let key in options) {
				if (data.hasOwnProperty(key)) {
					options[key].value = data[key];
					options[key].hasOwnProperty('fileList') ? (options[key].fileList = data[key]) : '';
				}
			}
			this.timesFill('start_time', options, data);
		},
		timesFill(disabledType, options, data) {
			if (options.hasOwnProperty('times')) {
				options.times.value = [data.start_time || '', data.end_time || ''];
				options.times[disabledType] = true;
			}
		},
		del(data) {
			this.$msgbox({
				title: '提示',
				message: '删除后不可恢复，是否要删除！',
				showCancelButton: true,
				center: true,
			}).then(res => {
				this.$http('/admin/active/editActive', { activeId: data.id, status: 5 })
					.then(res => {
						log.ok('删除成功');
						this._refresh();
					})
					.catch(err => {});
			});
		},
		handleClick() {},
		confirmCheck() {
			// this.prizeData = this.basePrizeData;
			this.innerVisible = false;
		},
		addChannel() {
			this.channels.push({
				name: '',
				value: [],
				start_time: false,
				end_time: false,
				defaultTime: ['00:00:00', '23:59:59'],
			});
			// this.options['channels'].value = JSON.stringify(this.channels);
		},
		removeChannel(index) {
			this.channels.splice(index, 1);
		},
		selectChange(data) {
			console.log('%c gc_data=>: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',data);
			this.prizeData = this._getPrizeData();
		},
		// ChxSelfBuilt(data) {
		//   this.prizeData = this._getPrizeData();
		// },
		addRules(data) {
			console.log('%c gc_data.goods_restrictions=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', data.goods_restrictions);
			this.selectData = this.parse(data.goods_restrictions, {
				platform: {},
				self: {},
			});
			this.prizeData = this._getPrizeData();
			this.addRulIsShow.state = true;
			this.activeId = data.id;
			let temp = this.parse(data.activity_rule, []);
			if (temp.length < 1) {
				temp = [
					{
						condition: {
							level: 1,
							describe: '',
						},
						result: {
							getReward: [],
							getChange: 0,
						},
						status: 'ENABLE',
					},
				];
			}
			this.rules = temp;
			//
			// this.AddRules = AddRules;
		},
		viewLinks(data) {
			this.activeId = data.id;
			this.viewLinksIsShow.state = true;
			this.ActiveLink = ActiveLink;
		},
		clearn() {
			this.selectData = {
				platform: {},
				self: {},
			}; //服务器获取的选中数据;
			this.prizeData = [];
			for (let key in this.options) {
				this.options[key].value = this.baseOptions[key].value;
				this.options[key].disabled = this.baseOptions[key].disabled;
			}
			// console.log('%c gc_this.options=>: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',this.options.times);
			this.options.times['start_time'] = false;
			this.options.times['end_time'] = false;
			this.channels = [];
			this.operationType = '';
		},
		_getPrizeData() {
			let data = JSON.parse(JSON.stringify(this.selectData));
			let temp = [];
			for (let key in data) {
				temp = temp.concat(this._getOneArray(Object.values(data[key])));
			}
			return temp;
			//
		},
		_getOneArray(array) {
			return [].concat(...array.map(x => (Array.isArray(x) ? this._getOneArray(x) : x)));
		},
		_refresh() {
			this.$refs.Table._search();
		},
		fan(){
		console.log('点击了额----------xxxx')
		}
	},
	watch: {
		channels: {
			deep: true,
			handler(val) {
				this.options['channels'].value = JSON.stringify(this.channels);
			},
		},
		'addRulIsShow.state'(isShow) {
			if (!isShow) {
				this.AddRules = null;
			}
		},
		'viewLinksIsShow.state'(val) {
			if (!val) {
				this.ActiveLink = null;
			}
		},
	},
};
</script>
style.<style lang="scss">
.zero-buy {
	.active-list {
		.el-dialog {
			.channels {
				margin-bottom: 20px;
				.addChannels {
					position: relative;
					top: -20px;
				}
			}
		}
	}
}
</style>


